<template>
  <div>
    <el-table
      :data="state.data.songs"
      v-loading="loading"
      element-loading-text="拼命加载中..."
      highlight-current-row
      empty-text="啊哦网络不给力呀"
      stripe
      style="width: 100%"
      @dblclick="li"
    >
      <el-table-column type="index" label="热度" width="60" />
      <el-table-column prop="name" label="歌名" width="400" />
      <el-table-column prop="address" />
    </el-table>
  </div>
</template>

<script>
import { reactive, onMounted, getCurrentInstance } from "vue";
import { mapState, mapMutations } from "vuex";
import getBottomData from "../../request/ItemMusic/MusicBottomData";
import { useStore } from "vuex";
export default {
  data() {
    return {
      loading: true,
    };
  },
  setup(id) {
    const store = useStore();
    const state = reactive({
      data: {},
    });
    onMounted(async () => {
      let dataS = getCurrentInstance().data;
      let res = await getBottomData(id.id, 10, 0);
      state.data = res.data;
      dataS.loading = false
    });
    return { state };
  },
  computed: {
    ...mapState(["playList", "playListIndex"]),
  },
  props: ["id"],
  methods: {
    li: function (row) {
      if (this.playList[0].al.id == 0 || (this.playList[0].al.id != this.state.data.songs[0].id)) {
        let t,ts;
      for(let i =0;i<this.state.data.songs.length;i++){
        t = parseInt((this.state.data.songs[i].dt)/1000/60%60)
        ts = parseInt((this.state.data.songs[i].dt)/1000%60)
       this.state.data.songs[i].dt =(t.toString()<10?'0'+t.toString():t.toString())+':'+ (ts.toString()<10?'0'+ts.toString():ts.toString())//将歌曲时间转换 
      }
        this.updatePlayList(this.state.data.songs);
        this.upDatePlayListIndex(row.path[2].__vnode.key);
      } else {
        this.upDatePlayListIndex(row.path[2].__vnode.key);
      }
    },
    ...mapMutations([
      "upDatePlayListIndex",
      "updatePlayList",
      "updatePlayListAdd",
    ]),
  }
};
</script>

<style lang="less" scoped>
.el-table {
  height: 250px;
}
</style>